<template>
  <div class="box" >
    <Title :place="place" :icon="icon" @handleTitleClick="handleTitleClick" :title="title_home"></Title>

    <ul class="language">
      <li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :key="$index">
        <div>
          <div>{{item.select}}</div>
          <div :class="{'active':item.active,'unactive':!item.active}"></div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import Title from "../layout/Title";
export default {
  name: "SelectLang",
  components: {
    Title
  },
  mounted() {
    let lang = this.$store.state.lang;
    // alert(lang)
    if (lang == "cn") {
      Vue.set(this.items[2], "active", true);
    } else if (lang == "en") {
      Vue.set(this.items[1], "active", true);
    } else {
      Vue.set(this.items[0], "active", true);
    }
  },
  data() {
    return {
      place: "left",
      icon: "fanhui",
      title_home: this.Lang[this.$store.state.lang].personCenter_t2,

      items: [
        { select: this.Lang[this.$store.state.lang].changeLang_t1 ,id:"myz" },
         { select: this.Lang[this.$store.state.lang].changeLang_t2,id:"en" }, 
         { select: this.Lang[this.$store.state.lang].changeLang_t3 ,id:"cn"}]
    };
  },
  methods: {
    handleTitleClick() {
      this.$router.go(-1);
    },
    selectStyle(item, index) {
      // alert(555)
      this.$nextTick(() => {
        this.items.forEach(item => {
          Vue.set(item, "active", false);
        });
        Vue.set(item, "active", true);
        // //console.log(item)
       
          this.$store.state.lang=item.id

          setTimeout(()=>{
              // this.$router.push({
              //     path:"/"
              // })
              this.$router.go(-2)
          },200)
      
      });
    }
  }
};
</script>

<style  scoped>
.language li {
  height: 50px;
  border-bottom: 1px solid #e9e9e9;
  line-height: 50px;
  padding-left: 15px;
  padding-right: 15px;
  color: #525252;
}

.language li div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li div div:nth-child(2) {
  width: 28px;
  height: 28px;
  /* background-color: red; */
}
.active {
  background: url("../assets/img/gou.png") no-repeat;
  background-size: contain;
}
</style>
